<template>
  <!-- 支付交易 -->
  <div class="smilepay">
    <!-- 导航 -->
    <tz-breadcrumb :pathArr='[{"name": "硬件"},{"name": "刷脸设备", "url": "/smilepay"}]'></tz-breadcrumb>
    <!-- 搜索表单 -->
    <form class="form"
          autocomplete="off"
          @submit.prevent="onSubmit"
          action="">
      <!-- 开始时间 -->
      <div class="form-item">
        <el-input class="form-input"
                  clearable
                  v-model="cashierName"
                  placeholder="开始时间"
                  size="medium"></el-input>
      </div>

      <div class="form-item">
        <el-input class="form-input"
                  clearable
                  v-model="account"
                  placeholder="结束时间"
                  size="medium"></el-input>
      </div>
      <el-button type="primary"
                 native-type='submit'>查询</el-button>
    </form>
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>设备列表</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text">添加绑定设备</el-button>
      </div>
      <div class="text item">
        <el-table :data="tableData"
                  v-loading="loading"
                  style="width: 100%">
          <el-table-column prop="id"
                           label="id"
                           width="50">

          </el-table-column>
          <el-table-column prop="username"
                           label="设备SN"
                           width="180">
          </el-table-column>
          <el-table-column prop="store_code"
                           label="绑定的商户">
          </el-table-column>
          <el-table-column prop="mobile"
                           label="绑定的收银员">
          </el-table-column>
          <el-table-column prop="created_at"
                           label="绑定时间">
          </el-table-column>
        </el-table>
        <el-pagination v-if="total > pageNum"
                       class="text-center pager"
                       @current-change="handleCurrentChange"
                       layout="total, prev, pager, next"
                       :total="total"></el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  data: function () {
    return {
      // 收银员姓名
      cashierName: '',
      // 所属商户
      storeName: '',
      // 收银员帐号
      account: '',
      // 支付方式
      payTypeOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'alipay',
          label: '支付宝支付'
        },
        {
          value: 'weixin',
          label: '微信支付'
        },
        {
          value: 'back',
          label: '银行卡支付'
        }
      ],
      loading: false,
      payType: 'all',
      // 交易状态
      orderStatusOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'paySuccess',
          label: '支付成功'
        },
        {
          value: 'refundSuccess',
          label: '退款成功'
        }
      ],
      orderStatus: 'all',
      // 收银员列表数据
      tableData: [],
      // 每页数量
      pageNum: 10,
      // 当前页
      page: 1,
      total: 0
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 提交搜索
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.requestData();
    },
    formatter (row, column) {
      return row.address;
    },
    handleCurrentChange (val) {
      this.page = val;
      this.requestData();
    },
    filterTag (value, row) {
      return row.tag === value;
    },
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    requestData () {
      let that = this;
      http.get(api.cashierList, {
        token: localStorage.getItem('token'),
        mobile: that.account,
        pagesize: that.pageNum,
        page: that.page
      }, response => {
        console.log(response);
        that.tableData = response.data[0].result.data;
        that.total = response.data[0].total;
      }, err => {
        console.log(err);
      });
    },
    // 记录详情
    detailsPages (id) {
      this.$router.push({
        path: '/cashierdetails',
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      margin-right 4rem
      font-size 14px
      color #333
    .form-input
      max-width 15rem
  .line
    height 4.5rem
.demo-table-expand
  font-size 0
  label
    width 90px
    color #99a9bf
  .el-form-item
    margin-right 0
    margin-bottom 0
    width 50%
.pager
  padding 0
</style>
